
<template>
	<view class="root">
		<!-- <view class="header pr-30 pl-30">
			<view class="fixed width-100vw pl-30 pr-30 bgc-f7f4fc">
				<view
					class="navigate-bar jc-center mt-30 fs-46 color-1a fw-700"
				>
					我的订单
				</view>
			</view>
			<view class="navigate-bar mb-30" />
		</view> -->
		<scroll-view class="main f1" :scroll-y="true" @scrolltolower="getData">
			<view
				v-for="(item, index) in order.lists"
				:key="index"
				class="section bgc-fff mb-30 ml-30 mr-30"
			>
				<view class="subject fd-row jc-sb ai-center">
					<view class="title fd-row ai-center">
						<image
							class="width-28 height-26"
							src="/static/imgs/icon-station.png"
						/>
						<text class="name fs-28 ml-10 color-333 fw-700">
							{{ item.name }}
						</text>
					</view>
					<view class="status fs-22 fd-row ai-center">
						<text class="color-8f9aa8">{{ item.time }}</text>
						<text class="pay-status color-4371ff ml-14">{{
							item.status == 0
								? "未支付"
								: item.status == 1
								? "待出库"
								: item.status == 2
								? "派送中"
								: "已完成"
						}}</text>
					</view>
				</view>
				<view class="content">
					<text class="color-8f9aa8 fs-22">取件码</text>
					<text class="color-4371ff fs-32 mt-16 fw-700">
						{{ item.code }}
					</text>
				</view>
				<view class="bgc-eb height-2" />
				<view class="opration fd-row jc-sb mt-16 ai-center">
					<text class="order-number color-8f9aa8 fs-22">
						单号：{{ item.sn }}
					</text>
					<view class="btn-container fd-row fs-24">
						<view
							v-if="item.status == 0"
							@click="oprationOrder(index, true)"
							class="cancel-btn color-333 mr-20"
						>
							取消订单
						</view>
						<view
							v-if="item.status !== 1"
							class="pay-btn color-fff ml-20"
							@click="oprationOrder(index, false)"
							:style="item.status == 3 && `background: #ccc`"
						>
							{{
								item.status == 0
									? "马上支付"
									: item.status == 3
									? "已完成"
									: "签收"
							}}
						</view>
					</view>
				</view>
			</view>

			<label v-if="isLoading" class="ai-center jc-center">
				<image
					class="width-46 height-46"
					src="/static/imgs/icon-loading.gif"
					mode="aspectFill"
				/>
				<text class="color-666 fs-28 ml-18">加载中...</text>
			</label>
			<text
				v-if="!order.lists.length && !isLoading"
				class="color-666 fs-28 ml-18 text-center mt-30"
				>这里空空如也...</text
			>
		</scroll-view>
		<popup ref="payment" type="bottom">
			<view class="popup-box bgc-fff fs-32 color-333">
				<label
					v-for="(item, index) in payment"
					:key="index"
					@click="pay(item.provider)"
					class="ai-center jc-center box-item"
				>
					<image
						class="width-42 height-42 mr-10"
						:src="'/static/imgs/icon-' + item.provider + '.png'"
					/>
					<text>{{ item.name }}</text>
				</label>
			</view>
		</popup>
	</view>
</template>

<script>
	import popup from "@/components/popup";

	export default {
		name: "order",
		components: { popup },
		data: () => ({
			order: { lists: [], page: 1 },
			payment: [
				{ name: "微信支付", provider: "wxpay" },
				{
					name: "支付宝支付（推荐）",
					provider: "alipay",
				},
			],
			isLoading: true,
		}),
		onLoad() {
			this.getData();
		},
		onPullDownRefresh() {
			this.getData("refresh");
		},
		methods: {
			popupCtrl(mode, type = "payment") {
				// #ifdef MP-WEIXIN
				uni.showToast({ title: "请前往app端进行支付", icon: "none" });
				// #endif

				// #ifndef MP-WEIXIN
				mode ? this.$refs[type].open() : this.$refs[type].close();
				// #endif
			},
			getData(mode) {
				if (mode == "refresh") {
					this.order.page = 1;
					this.order.lists = [];
				}
				if (!this.order.page) return;
				this.isLoading = true;
				uni.fetch("/api/order/listUser", {
					data: { page: this.order.page, limit: 10 },
					complete: uni.stopPullDownRefresh,
					success: (res) => {
						this.order.page = res.page;
						this.order.lists.push(...res.lists);
						this.isLoading = false;
					},
				});
			},
			oprationOrder(index, isCancel) {
				let item = this.order.lists[index];
				switch (item.status) {
					case 0: //马上支付 - 取消订单
						isCancel
							? uni.fetch("/api/order/edit", {
									data: {
										orderId: item.orderId,
										status: -1,
									},
									success: (res) => {
										this.order.lists.splice(index, 1);
										uni.showToast({ title: "已取消" });
									},
							  })
							: ((this.currentIndex = index), this.popupCtrl(true));
						break;
					case 1:
					case 2: //签收
						uni.fetch("/api/order/edit", {
							data: {
								orderId: item.orderId,
								status: 3,
							},
							success: (res) => {
								this.order.lists[index].status = 3;
								uni.showToast({ title: "已签收" });
							},
						});
						break;
					case 3: //已完成
						return;
				}
			},
			pay(provider) {
				// #ifdef APP-PLUS
				const { order, currentIndex } = this;
				const { orderId: oid } = order.lists[currentIndex];
				uni.fetch("/api/order/get_pay", {
					data: { oid, provider },
					success: (orderInfo) =>
						uni.requestPayment({
							provider,
							orderInfo,
							fail: () => {
								uni.showToast({
									title: "支付失败",
									icon: "none",
								});
							},
							success: () =>
								uni.fetch("/api/order/select", {
									data: { oid, provider },
									success: () =>
										uni.showToast({
											title: "支付成功！",
											duration: 1200,
											success: () =>
												(this.order.lists[
													this.currentIndex
												].status = 1),
										}),
								}),
						}),
				});

				this.popupCtrl(false);
				// #endif
			},
		},
	};
</script>

<style scoped>
	.header {
		z-index: 9;
	}
	.navigate-bar {
		height: 60px;
	}
	.icon {
		width: 114rpx;
		height: 114rpx;
	}

	.main {
		overflow: hidden;
	}

	.section {
		box-shadow: 0 5rpx 20rpx 0 rgba(151, 166, 192, 0.22);
		border-radius: 10rpx;
		padding: 20rpx;
	}
	.content {
		padding: 30rpx 40rpx;
	}
	.pay-status {
		padding: 8rpx 12rpx;
		border-radius: 4rpx;
		background-color: #e5ebff;
	}
	.cancel-btn,
	.pay-btn {
		padding: 12rpx 20rpx;
		border-radius: 28rpx;
	}
	.cancel-btn {
		border: 1px solid #d9d9d9;
	}
	.pay-btn {
		background: linear-gradient(90deg, #8ec5fc, #4388e7);
	}

	.popup-box {
		border-top-left-radius: 12rpx;
		border-top-right-radius: 12rpx;
	}

	.box-item {
		padding: 30rpx;
		margin: 0 40rpx;
		border-bottom: 1rpx solid #ebebeb;
	}
</style>